<template>
  <div>
    <el-dialog
      title="下发通知"
      :visible.sync="dialogVisible"
      width="50%"
      top="10%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-input v-model="submitPara.remarks" type="textarea" :rows="10" />
      <div style="text-align: center; margin-top: 20px;">
        <el-button type="primary" :loading="btnLoading" @click="batchSubmit()">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/staffing' }">机构编制管理</el-breadcrumb-item>
      <el-breadcrumb-item>填报管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div id="recruitSelect" :style="'height:'+tableHeight+'px'">
      <div style="height: 44px; padding-bottom: 4px;">
        <el-button type="success" @click="updateBatchState()" style="float: right;">批量下发单位填报</el-button>
      </div>
      <el-scrollbar style="height:calc(100% - 16px);">
        <el-tree
          node-key="name"
          :expand-on-click-node="false"
          :render-content="renderContent"
          class="filter-tree"
          :data="orgList"
          show-checkbox
          ref="tree2"
          :empty-text="loadingtext"
          default-expand-all
          @check-change="checkChangeHandler"
          >
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableHeight: 100,
      loadingtext: '正在加载...',
      listLoading: false,
      orgList: [],
      multipleSelection: [],
      btnLoading: false,
      dialogVisible: false,
      submitPara: {
        remarks: '',
        unitIds: []
      }
    }
  },
  methods: {
    // 获取列表
    getOrgList () {
      this.loadingtext = '正在加载...'
      this.listLoading = true
      this.$http
        .get(this.$http.defaults.headcountAPI + `api/busUnit/getUnitTree`)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.loadingtext = '无匹配数据'
            this.orgList = response.data.result
            this.orgList.map(item => {
              item.name = item.label
            })
            this.orgList.forEach(org => {
              org.children.map(item => {
                if (item.status === 0) {
                  item.disabled = true
                }
              })
            })
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    // 渲染内容
    renderContent (h, { node, data, store }) {
      return (
        <div class="nodelist" style="width:100%; height:50px;">
          <div style={data.depttype === '分类' ? 'font-weight:bolder;float:right' : 'float:right'}>
            <div style="float:right; line-height:28px; padding:11px 10px 0; width:660px">
              <span style="margin-right: 150px;" v-show={data.name === '机关司局' || data.name === '派出机构' || data.name === '直属事业单位'}>状态</span>
              <span style="margin-left: -6px; margin-right: 112px;" v-show={data.status === 1 && !data.submitTime}>未下发</span>
              <span style="margin-left: -6px; margin-right: 100px; color: blue; font-weight: bolder;" v-show={data.status === 0}>填报中</span>
              <span style="margin-left: -6px; margin-right: 100px; color: green; font-weight: bolder;" v-show={data.status === 1 && data.submitTime}>已提交</span>
              <span style="margin-right: 224px;" v-show={data.name === '机关司局' || data.name === '派出机构' || data.name === '直属事业单位'}>提交时间</span>
              <span style="margin-right: 234px;" v-show={data.status === 1 && !data.submitTime}></span>
              <span style="margin-right: 98px;" v-show={data.status === 1 && data.submitTime}>{data.submitTime}</span>
              <span v-show={data.name === '机关司局' || data.name === '派出机构' || data.name === '直属事业单位'}>操作</span>
              <el-button v-show={data.status === 1} size="small" type="success" on-click={ () => this.updateBatchState(data.id) }>下发单位填报</el-button>
              <el-button v-show={data.status === 1 && data.submitTime} size="small" type="primary" on-click={ () => this.goSelect(data.jgsyCode) }>查看</el-button>
            </div>
          </div>
          <i class={data.children ? 'icon-wenjianjia1 tree-icon iconfont' : 'icon-danwei tree-icon iconfont'} style="float:left" />
          <span title={data.name} style={data.children ? 'font-weight:bolder;line-height:28px' : 'line-height: 50px;display:block;text-overflow:ellipsis;width:600px;overflow:hidden;float:left;'}>{data.name}</span>
        </div>
      )
    },
    // 监听选中状态
    checkChangeHandler (row, flag) {
      if (row.loginName) {
        if (flag) {
          this.multipleSelection.push(row.id)
        } else {
          this.multipleSelection = this.multipleSelection.filter(item => item !== row.id)
        }
      }
    },
    // 批量下发单位填报
    updateBatchState (id) {
      this.submitPara.remarks = ''
      if (id) {
        this.submitPara.unitIds = [id]
      } else {
        this.submitPara.unitIds = [...this.multipleSelection]
      }
      if (this.submitPara.unitIds.length === 0) {
        this.$message({
          message: '至少选择一家机构'
        })
        return
      }
      this.dialogVisible = true
    },
    // 确认
    batchSubmit () {
      const para = {
        remarks: this.submitPara.remarks,
        unitIds: this.submitPara.unitIds
      }
      this.btnLoading = true
      this.$http
        .post(this.$http.defaults.headcountAPI + `api/busUnit/updateBatchState`, para)
        .then(response => {
          this.btnLoading = false
          if (response.data.success === true) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.dialogVisible = false
            this.getOrgList()
          } else {
            console.log('操作失败:' + response.data.message)
            this.$message({
              message: '操作失败:' + response.data.message,
              type: 'error'
            })
            this.btnLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '操作失败:' + error,
            type: 'error'
          })
          this.btnLoading = false
        })
    },
    // 查看
    goSelect (jgsyCode) {
      this.$router.push({name: `staffingOrg`, query: {jgsyCode, flag: 'admin'}})
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      let myheight = 165
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - myheight
      })
    }
  },
  mounted () {
    this.getOrgList()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style scoped>
#recruitSelect {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin: 0 0 0 10px;
  padding:10px;
  width: calc(100% - 20px);
}
</style>
<style>
#recruitSelect .el-table .row-b{
  font-weight: bolder
}
#recruitSelect i{
  padding-right: 5px;
}
i.icon-wenjianjia1{
  color: #ffc500 !important;
}
i.icon-danwei{
  color: #6fb400 !important;
}
#recruitSelect {
  clear: both;
  height:100%;
  margin-top:0;
  overflow: hidden;
}
#recruitSelect .el-tree-node__content{
  height: 50px;
}
#recruitSelect .nodelist{
  font-size: var(--size) !important;
  line-height: 50px;
}
#recruitSelect .nodelist .el-progress {
  padding: 15px 0 0;
}
#recruitSelect .wboxd{
  padding:10px;
  width: calc(100% - 20px);
  background: #fff;
  border: 1px solid #95B8E7;
  margin: 0 10px;
  overflow: hidden;
}
</style>
